{include file='public/header' /}
<style>
    [lay-filter="formQA"] .layui-form-item, .layui-inline {
        margin-bottom: 0;
        margin-top: 20px;
    }

    .qa-xx-item {
        padding-left: 25px;
        margin-bottom: 20px;
    }

    .qa-xx-item-title {
        position: absolute;
        left: 0;
        line-height: 38px;
    }

    #demo2 {
        display: flex;
        align-items: center;
    }

    #demo2 li .operate {
        color: #000;
        display: none;
    }

    #demo2 li .close {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
    }

    #demo2 li:hover .operate {
        display: block;
    }

    .operate {
        position: absolute;
        right: 0;
        top: -9px;
        color: black;
        font-size: 34px;
        /* border: 1px solid red; */
        font-weight: bold;
    }

    .item_img {
        position: relative;
        margin-right: 10px;
    }

    .attribute {
        width: 100%;
        border: 1px solid #e6e6e6;
        margin-top: 20px;
    }

    .atr {
        height: 50px;
        border: 1px solid #e6e6e6;
    }

    .ath {
        width: 100px;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
    }

    .sl {
        width: 180px;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        display: block;
        white-space: nowrap;
    }

    .atd {
        display: flex;
        text-align: center;
        height: 38px;
        justify-content: center;
        align-items: center;
    }

    table input {
        text-align: center;
        border: none !important;
    }

    table td {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    table td:last-child {
        border-right: none;
    }

    .divs {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

    #progress {
        width: 300px;
        height: 20px;
        background-color: #f7f7f7;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
    }

    .finish {
        float: left;
        border-radius: 10px;
        background-color: #149bdf;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        display: inline-block;
        height: 20px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <h2>商品信息</h2>
    </div>

    {present name="info.id"}
    <form class="layui-form" lay-filter="formQA" action="{:url('mall.item/edit')}" method="post" style="max-width: 960px;">
        {else/}
        <form class="layui-form" action="{:url('mall.item/add')}" lay-filter="formQA" method="post" style="max-width: 960px;">
            {/present}


            <input type="hidden" name="id" value="{$info['id'] ?? ''}"/>
            <div class="layui-form-item" style="margin-top: 0;">

                <label class="layui-form-label">商品标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{$info['title'] ?? ''}" maxlength="50"
                           lay-verType="tips" lay-verify="required" required placeholder="请输入商品标题" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">

                <label class="layui-form-label">商品货号：</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_no" value="{$info['goods_no'] ?? ''}"
                           lay-verType="tips" lay-verify="required" required placeholder="请输入商品货号" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品类型：</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="raQT" name="type" value="1" title="线下商品" {if !isset($info.type)} checked {/if} {if isset($info.type)&&$info.type== 1}checked {/if}>
                    <input type="radio" lay-filter="raQT" name="type" value="2" title="线上商品" {if isset($info.type)&&$info.type== 2}checked{/if}>

                </div>
            </div>

            <div class="layui-form-item" id="subscribe" {if isset($info.type)&&$info.type== 2} style="display: none" {/if}>
                <label class="layui-form-label">预约商品：</label>
                <div class="layui-input-block">
                    <input type="radio"  name="is_subscribe" value="1" title="需预约" {if !isset($info.is_subscribe)} checked {/if} {if isset($info.is_subscribe)&&$info.is_subscribe== 1}checked {/if}>
                    <input type="radio"  name="is_subscribe" value="2" title="无需预约" {if isset($info.is_subscribe)&&$info.is_subscribe== 2}checked{/if}>

                </div>
            </div>

            <div class="layui-form-item" id="special" {if isset($info.type)&&$info.type== 2} style="display: none" {/if}>
                <label class="layui-form-label">优惠套餐定制福利：</label>
                <div class="layui-input-block">
                    <input type="radio"  name="special" value="1" title="定制福利" {if !isset($info.special)} checked {/if} {if isset($info.special)&&$info.special== 1}checked {/if}>
                    <input type="radio"  name="special" value="0" title="非定制福利" {if isset($info.special)&&$info.special== 0}checked{/if}>

                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">折扣商品：</label>
                <div class="layui-input-block">
                    <input type="radio"  name="is_discount" value="1" title="参与折扣" {if !isset($info.is_discount)} checked {/if} {if isset($info.is_discount)&&$info.is_discount== 1}checked {/if}>
                    <input type="radio"  name="is_discount" value="2" title="不参与折扣" {if isset($info.is_discount)&&$info.is_discount== 2}checked{/if}>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">售后类型：</label>
                <div class="layui-input-block">
                    <input type="radio" name="can_refund" value="1" title="可退款" {if !isset($info.can_refund)} checked {/if} {if isset($info.can_refund)&&$info.can_refund== 1}checked{/if}>
                    <input type="radio" name="can_refund" value="2" title="不可退款" {if isset($info.can_refund)&&$info.can_refund== 2}checked{/if}>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">主&nbsp&nbsp&nbsp&nbsp图：</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-sm uploadPic"><i class="layui-icon">&#xe67c;</i>图片上传</button>

                        <div class="layui-upload-list">

                            <ul class="layui-upload-box layui-clear">
                                {present name="info"}
                                <li><img style="width:100px;height:60px" src=" {$info['thumb'] ?? ''}  "/></li>
                                {/present}
                            </ul>
                            <input type="hidden" name="thumb" class="layui-upload-input" value="{$info['thumb'] ?? ''}">


                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分&nbsp&nbsp&nbsp&nbsp类：</label>
                <div class="layui-input-inline" layui-form-required style="width: 500px">
                    <select name="category_id">
                        {foreach $categories as $v}
                        <option value="{$v.id}" {if isset($info.category_id)&&$info.category_id==$v.id}selected{/if}>{$v.name}</option>
                        {if isset($v.childs) && !empty($v.childs)}
                        {foreach $v.childs as $vv}
                        <option value="{$vv.id}" {if isset($info.category_id)&&$info.category_id==$vv.id}selected{/if}>&nbsp;&nbsp;&nbsp;┗━━{$vv.name}</option>
                        {if isset($vv.childs) && !empty($vv.childs)}
                        {foreach $vv.childs as $vvv}
                        <option value="{$vvv.id}" {if isset($info.category_id)&&$info.category_id==$vvv.id}selected{/if}>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┗━━{$vvv.name}
                        </option>
                        {/foreach}
                        {/if}
                        {/foreach}
                        {/if]
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-upload" style="margin-top: 15px;">
                <label class="layui-form-label">轮播图：</label>
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <span style="color: #FFB800">（图片尺寸：375px * 370px）</span>
                <blockquote class="layui-elem-quote layui-quote-nm " style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2">
                        {present name="info"}
                        {foreach $info['image'] as $im }
                        <li class="item_img">
                            <div class="operate"></i><i class="close layui-icon"></i>
                            </div>
                            <img src="{$im ?? ''}" class="layui-upload-img" width="60">
                            <input type="hidden" name="image[]" value="{$im??''}">
                        </li>
                        {/foreach}
                        {/present}


                    </div>
                </blockquote>
            </div>

            <!--规格属性-->

            <span id="qaRI2">
            {include file='mall/item/sku' /}

            </span>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea  readonly placeholder="请输入备注" name="comment" class="layui-textarea">{$info['comment'] ??''}</textarea>
                </div>
            </div>
            <!--规格属性-->
            <div class="layui-form-item" style="margin-bottom: 80px">
                <label class="layui-form-label">商品内容：</label>
                <div class="layui-input-block">
					<textarea name="content" id="qaContent">
                   {$info['content'] ?? ''}
                    </textarea>
                </div>
            </div>

            <div class="form-group-bottom text-center" style="position: fixed; bottom: 0px;width:100%;height:50px">
                <input class="layui-btn" type="button" lay-submit lay-filter="modelSubmitAuth" value="保存">
                <input class="layui-btn" type="button" onclick="go()" value="返回">


            </div>
        </form>

</div>

{include file='public/footer' /}

<script>
    layui.use(['upload', 'layer', 'element', 'form', 'layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var admin = layui.admin;
        var layedit = layui.layedit;
        layedit.set({
            uploadImage: {
                url: '{:__url("admin/upload/upload")}'//接口url
                , type: ''//默认post
            }
        });

        var editIndex = layedit.build('qaContent'); // 建立编辑器

        var actives = {
            content: function () {
                alert(layedit.getContent(editIndex));//获取编辑器内容
            },
            text: function () {
                alert(layedit.getText(editIndex));//获取编辑器纯文本内容
            }
            , selection: function () {
                alert(layedit.getSelection(editIndex));
            }
        };
        $('.site-demo-layedit').on('click', function () {
            var type = $(this).data('type');
            actives[type] ? actives[type].call(this) : '';
        });


        /*tab切换事件*/
        //触发事件
        var active = {
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        // 表单提交事件
        form.on('submit(modelSubmitAuth)', function (data) {
            let url = $('.layui-form').attr('action');

            data.field.content = layedit.getContent(editIndex);//关键代码
            if (data.field.pid == '') {
                data.field.pid = '0';
            }

            $.post(url, data.field, function (res) {
                if (res.code == 1) {
                    window.parent.location.reload();//刷新父页面
                    let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index);
                    layer.msg(res.msg, {icon: 1});

                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json');
            return false;
        });

        // 试题类型切换事件
        form.on('radio(raQT)', function (data) {
            changeQT(data.value);
        });

        function changeQT(value, sel) {
            if (value == 1) {
                $('#subscribe').show();
                $('#special').show();
            } else if (value == 2) {

                $('#subscribe').hide();
                $('#special').hide();


            }
        }

        /*
         setTimeout(function () {
         changeQT(1);
         }, 50);
         */
        //普通图片上传
        $(".uploadPic").each(function (index, elem) {
            upload.render({
                elem: $(elem)
                , url: '{:__url("admin/upload/upload")}'
                , multiple: false
                , data: {"_token": "{{ csrf_token() }}"}
                , done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                            $(elem).parent('.layui-upload').find('.layui-upload-box').html('<li><img style="width: 100px;height:60px" src="' + res.url + '" /></li>');
                            $(elem).parent('.layui-upload').find('.layui-upload-input').val(res.url);
                        })
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1000})
                    }
                }
            });
        })

        //多图片上传
        upload.render({
            elem: '#test2',
            url: '{:__url("admin/upload/upload")}'
            //上传接口
            ,
            data: {"_token": "{{ csrf_token() }}"},
            multiple: false,

            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
//                    $('#demo2').append()
                });
            },
            done: function (res) {
                //上传完毕
                if (res.code == 0) {
                    //console.log(111)
                    $('#demo2').append('<li class="item_img">' +
                            '<div class="operate"></i>' +
                            '<i  class="close layui-icon">' +
                            '</i>' +
                            '</div>' +
                            '<img src="' + res.url + '" class="layui-upload-img" width="60">' +
                            '<input type="hidden" name="image[]" value="' + res.url + '">' +
                            '</li>');
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000})
                }
            }
        });
//点击多图上传的X,删除当前的图片
        $("body").on("click", ".close", function () {
            $(this).closest("li").remove();
        });

    });
    function go(){
        let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
        parent.layer.close(index);
    }
</script>